window.addEventListener('load', function () {
    // 1.获取元素
    var focus = document.querySelector('.focus');
    var ul = focus.querySelector('ul');
    var ol = focus.querySelector('ol');
    var lis = ul.querySelectorAll('li');
    var index = 0;
    var w = focus.offsetWidth;
    // 2.给ul添加定时器
    var timer = setInterval(function () {
        index++;
        var temp = -index * w;
        // 想要有渐变动画-->transition
        ul.style.transition = 'All .3s';
        ul.style.transform = 'translateX(' + temp + 'px)';
    }, 2000);
    // 3.监听事件动画过渡效果完成   transitionend
    ul.addEventListener('transitionend', function () {
        // console.log(1);
        // 当图片到达最后一张图片的时候
        if (index >= 3) {
            // 让当前的索引号变为0
            index = 0;
            // 去掉当前的过渡效果
            this.style.transition = 'none';
            var transformx = -index * w;
            ul.style.transform = 'translateX(' + transformx + 'px)';
        } else if (index < 0) {
            index = 2;
            // 去掉当前的过渡效果
            this.style.transition = 'none';
            var transformx = -index * w;
            ul.style.transform = 'translateX(' + transformx + 'px)';
        }
        // 2.小圆点跟随图片来移动
        // 2-1 去除当前li里面有current的类名
        ol.querySelector('.current').classList.remove('current');
        // 2-2 给当前的li添加 current 类
        ol.children[index].classList.add('current');
    })
    // 3.手指拖动的制作
    var start = 0;
    var move = 0;
    var flag = false;  // 判断用户是否移动了图片
    // 3-1 触摸元素 获取手指当前的坐标 startx
    ul.addEventListener('touchstart', function (e) {
        start = e.targetTouches[0].pageX;
        clearInterval(timer);
        e.preventDefault(); // 阻止屏幕滚动 
    });
    // 3-2 移动手指 获取手指移动后的坐标 movex 两者相减 得到盒子要移动的距离
    ul.addEventListener('touchmove', function (e) {
        // 获取移动后的位置坐标
        move = e.targetTouches[0].pageX - start;
        var transformx = -index * w + move;
        this.style.transition = 'none';
        ul.style.transform = 'translateX(' + transformx + 'px)';
        flag = true;
    });
    // 4.手指滑动播放上一张或者下一张
    ul.addEventListener('touchend', function (e) {
        if (flag) {
            // Math.abs()  取绝对值函数
            if (Math.abs(move) > 50) {
                // 如果手指移动的距离是正值，说明向右边滑动
                if (move > 0) {
                    index--;
                }// 如果手指移动的距离是负值，说明向左边滑动
                else {
                    index++;
                }
                var transformx = -index * w;
                this.style.transition = 'all .3s';
                ul.style.transform = 'translateX(' + transformx + 'px)';
            }
            else {
                var transformx = -index * w;
                this.style.transition = 'all .3s';
                ul.style.transform = 'translateX(' + transformx + 'px)';
            }
        }
        // 开启定时器前 需要先清除原来的定时器
        clearInterval(timer);
        timer = setInterval(function () {
            index++;
            var temp = -index * w;
            // 想要有渐变动画-->transition
            ul.style.transition = 'All .3s';
            ul.style.transform = 'translateX(' + temp + 'px)';
        }, 2000);

    });
})